import React from 'react';
import { Button, Descriptions } from 'antd';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { useIntl } from 'umi';
import { getFileSuffix } from '@/utils/utils';
import moment from 'moment';
import { TIMEFORMAT } from '@/utils/const';

import styles from '../index.less';

export type FileInfoType = {
  name?: string;
  createdAt?: number;
  size?: number;
} & {}

interface Props {
  fileInfo: FileInfoType;
  onFileIndexChange: (type: 'prev' | 'next') => void;
  prev: boolean;
  next: boolean;
}

const FileViewer: React.FC<Props> = props => {
  const { formatMessage: f } = useIntl();
  const { fileInfo, onFileIndexChange, prev, next } = props;

  return (
    <div className={styles.fileInfoBox}>
      <Descriptions title={f({ id: 'dataSet.detail.files.image.title' })} bordered>
        <Descriptions.Item label={f({ id: 'dataSet.detail.files.name' })} span={2}>
          {fileInfo?.name}
        </Descriptions.Item>
        <Descriptions.Item label={f({ id: 'dataSet.detail.files.format' })}>
          {getFileSuffix(fileInfo?.name)}
        </Descriptions.Item>
        <Descriptions.Item label={f({ id: 'dataSet.detail.files.createdAt' })} span={2}>
          {fileInfo?.createdAt ? moment(fileInfo?.createdAt).format(TIMEFORMAT) : '-'}
        </Descriptions.Item>
        <Descriptions.Item label={f({ id: 'dataSet.detail.files.size' })}>
          {((fileInfo?.size || 0) / 1024).toFixed(2)}kb
        </Descriptions.Item>
      </Descriptions>
      <div className={styles.fileBox}>
        <Button disabled={!prev} onClick={() => onFileIndexChange('prev')}>
          <LeftOutlined />
        </Button>
        <Button disabled={!next} onClick={() => onFileIndexChange('next')}>
          <RightOutlined />
        </Button>
      </div>
    </div>
  )
}

export default FileViewer;